<template>
  <div class="page1">
    <Header :isGoBack="false">
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="ws1200">
      <div class="left">
        <div class="item">键盘熟练度</div>
      </div>
      <div class="right">
        <div class="head">
          <div class="head-1">键盘熟练度</div>
          <div class="head-2">
            当前水平：
            <span>{{ curGrade }} </span>
            <span>{{ month }}</span>
          </div>
        </div>
        <div class="main">
          <div class="main1">
            <div class="title">近十次测试成绩走向图：</div>

            <div v-if="$store.getters.isTeacher" class="not-click">
              进入测试
            </div>
            <div
              v-else
              class="btn"
              @click="$router.push({ name: 'keyboard2' })"
            >
              进入测试
            </div>
          </div>
          <div class="main2">
            <div id="map"></div>
            <div class="nothing" v-show="isnothing">暂无测试记录</div>
          </div>
          <div class="main3">
            <div class="title">测试记录：</div>
            <div class="ctx">
              <div class="ctx-title">
                <div class="title">测试时间</div>
                <div class="title">测试成绩</div>
                <div class="title">进步情况</div>
              </div>
              <div class="ctx-main">
                <div class="item" v-for="item in gradeList" :key="item.id">
                  <div class="testTime">{{ item.testTime }}</div>
                  <div class="testGrade">{{ item.testGrade }}</div>
                  <div class="status">
                    <span v-if="item.status == 0"> - </span>
                    <span v-if="item.status == 1" class="green-color-text">
                      <i class="iconfont iconweb-icon-1"></i> 进步</span
                    >
                    <span v-if="item.status == 3">
                      <i class="iconfont iconline"></i> 原地踏步</span
                    >
                    <span v-if="item.status == 2" class="red-color-text">
                      <i class="iconfont iconweb-icon-"></i> 退步</span
                    >
                  </div>
                </div>
                <div class="nothing1" v-show="isnothing1">暂无测试记录</div>
              </div>
            </div>
            <div
              class="block common-pagination"
              v-if="total_num > Form.pageSize"
            >
              <el-pagination
                @current-change="handleCurrentChange($event)"
                :current-page="Form.pageNum"
                :page-size="Form.pageSize"
                layout="prev, pager, next"
                :total="total_num"
                background
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { gethomePage, getRunChart } from "@/api/jianpan.js";
import Header from "@/components/Header";
export default {
  data() {
    return {
      Form: {
        //分页
        pageNum: 1,
        pageSize: 5,
      },
      isnothing: 0, //空值显示
      isnothing1: 0, //空值显示
      total_num: 0, //分页器
      curGrade: 0, //上次成绩
      month: "", //上次成绩的时间
      gradeList: [],
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  components: { Header },
  methods: {
    init() {
      // 十次走向
      getRunChart().then((res) => {
        if (res.code === 200) {
          let XData1 = [],
            YData1 = [];
          if (!res.data.length) {
            this.isnothing = true;
          }
          res.data.forEach((e) => {
            XData1.push(e.start_time);
            YData1.push(e.kpm);
          });

          let myEcharts = this.$echarts.init(document.querySelector("#map"));
          let option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            grid: {
              y2: 120,
            },
            xAxis: {
              type: "category",
              data: XData1.reverse(),
              axisLabel: {
                rotate: 60,
              },
            },
            yAxis: {
              name: "成绩",
              nameLocation: "end",
              nameTextStyle: {
                fontWeight: 800,
              },
              // type: 'category',
              boundaryGap: true,
            },
            series: [
              {
                name: "成绩",
                data: YData1.reverse(),
                type: "line",

                label: {
                  show: true,
                  position: "top",
                  color: "#FF9611",
                },
                itemStyle: {
                  normal: {
                    color: "#FF9611",
                    lineStyle: {
                      width: 3,
                    },
                  },
                },
              },
            ],
          };
          myEcharts.setOption(option);
        }
      });
      // 历次成绩列表
      let data = {
        pageNum: this.Form.pageNum,
        pageSize: this.Form.pageSize,
      };
      gethomePage(data).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.gradeList = [];
          this.curGrade = res.data.lastKpm ? res.data.lastKpm + "个" : "";
          this.total_num = res.data.kpmList.total_num;
          res.data.kpmList.list.forEach((e) => {
            this.gradeList.push({
              testTime: e.start_time,
              testGrade: e.kpm,
              status: e.is_process,
            });
          });
          this.month = this.gradeList.length
            ? this.d(this.gradeList[0].testTime)
            : "还没有训练记录";
        }
      });
    },
    // 处理日期用 返回 几个小时前 类似
    d(p) {
      let diffTime = Date.now() - new Date(p).getTime();
      let computeTime = diffTime / 1000;
      let year = Math.floor(computeTime / 86400 / 365);
      computeTime = computeTime % (86400 * 365);
      let month = Math.floor(computeTime / 86400 / 30);
      computeTime = computeTime % (86400 * 30);
      let day = Math.floor(computeTime / 86400);
      computeTime = computeTime % 86400;
      let hour = Math.floor(computeTime / 3600);
      computeTime = computeTime % 3600;
      let minute = Math.floor(computeTime / 60);
      computeTime = computeTime % 60;
      let second = computeTime;

      let res = year
        ? year + "个年前"
        : month
        ? month + "个月前"
        : day
        ? day + "个天前"
        : hour
        ? hour + "个小时前"
        : minute
        ? minute + "个分钟前"
        : second + "个秒钟前";
      return res;
    },
    // 分页
    handleCurrentChange(val) {
      this.Form.pageNum = val;
      this.init();
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
@import './page1.styl';
</style>